<template>
  <el-form-item :class="getClz()" :prop="opt.name" v-if="!opt.hide"
                v-bind="opt.itemProps">
    <span slot="label">{{ opt.text }}
      <el-popover v-if="Boolean(opt.textLabel)" placement="top" trigger="hover">
        <div>{{ opt.textLabel }}</div>
        <i slot="reference" class="el-icon-warning"/>
      </el-popover>
    </span>
    <el-select v-model="value" style="width: 100%;"
               :placeholder="opt.props.disabled?'':opt.placeholder"
               :clearable="opt.props.clearable"
               v-bind="opt.props"
               @change="handleChange"
    >
      <el-option :label="opt.hasNullOption.label" :value="opt.hasNullOption.value"
                 v-if="opt.hasNull"></el-option>
      <el-option v-for="(option,index) in opt.options"
                 :key="index"
                 :label="option[opt.optionsLabel]"
                 :value="option[opt.optionsValue]+''"
      />
    </el-select>
  </el-form-item>
</template>

<script>
import extend from '../extend';

let Log = () => {
};

export default {
  name: "FormSelectStr",
  mixins: [extend],
  dicts: [],
  props: {
    column: {
      type:[Object,Array],
      default:{}
    },
    data:{
      type:[Object,Array],
      default:{}
    }
  },
  data() {
    return {
      value: "",
      opt: {
        name: '',
        text: '',
        prop: '',
        itemProps: {},
        props: {
          disabled: false,
          filterable: true,
          clearable: true
        },
        hide: false,
        placeholder: '',
        hasNull: false,
        hasNullOption: {label: "请选择...", value: ""},
        options: [],
        optionsLabel: 'label',
        optionsValue: 'value'
      }
    }
  },
  mounted() {
    this.initOptions();
    this.onChange = this.opt.onChange || Log;
    this.onOptions = this.opt.onOptions || Log;
    //
    this.$watch(`data.${this.column.name}`, (val) => {
      if (val) {
        this.value = val.split(',')
      } else {
        this.value = "";
      }
    })
  },
  methods: {
    setValue(val) {
      this.data[this.opt.name] = val;
    },
    setValueMap(val) {
      let opt = this.opt, values = this.value;
      this.onOptions(this.data, this.column, opt.options.filter((v) => {
        return values.indexOf(v[opt.optionsValue] + '') > -1
      }))
      this.onChange(this.data, this.column);
    },
    handleChange() {
      let str = this.value.join(',');
      this.setValue(str)
      this.setValueMap(str)
    }
  }
}
</script>

<style scoped>
</style>
